<template>
    <div id="contract">
        <el-row :gutter="20">
            <el-col :span="4">
                <div class="grid-content">
                    <el-input v-model="input" placeholder="合同编号"></el-input>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content">
                    <el-input v-model="input" placeholder="签单人"></el-input>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content">
                    <el-input v-model="input" placeholder="房源编号"></el-input>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content">
                    <el-input v-model="input" placeholder="客源编号"></el-input>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content">
                    <el-input v-model="input" placeholder="业主|客户手机号"></el-input>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content">
                    <el-input v-model="input" placeholder="合同编号"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="block">
                    <!-- <span class="demonstration">带快捷选项</span> -->
                    <el-date-picker class="kiki" v-model="value2" type="datetimerange" range-separator="到"
                        start-placeholder="开始时间" end-placeholder="结束结束" align="right">
                    </el-date-picker>
                </div>

            </el-col>
            <el-button style="margin-left:100px ; margin-top: 10px;" type="primary">搜索</el-button>
        </el-row>

        <template >
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="合同编号" width="180">
                </el-table-column>
                <el-table-column prop="name" label="合同状态" width="180">
                </el-table-column>
                <el-table-column prop="address" label="物业地址">
                </el-table-column>
                <el-table-column prop="serialnumber" label="房源编号">
                </el-table-column>
                <el-table-column prop="mastername" label="业主姓名">
                </el-table-column>
                <el-table-column prop="clientname" label="客户姓名">
                </el-table-column>
                <el-table-column prop="signacontracttime" label="签约日期">
                </el-table-column>
                <el-table-column prop="overtime" label="结束日期">
                </el-table-column>
                <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
<el-button type="text" @click="dialogFormVisible1(scope.row)">查看详情</el-button>
                    </template>
                    

                </el-table-column>
            </el-table>
        </template>
        <!-- 查看详情模态框 -->
        <el-dialog title="收货地址" :visible.sync="WatchDdialogFormVisible" width="25%">
            <el-form :model="watchForm">
                <el-form-item label="资讯编号:" :label-width="formLabelWidth">
                    <div>{{ watchForm.id }}</div>
                </el-form-item>
                <el-form-item label="咨询标题" :label-width="formLabelWidth">
                    <div>{{ watchForm.messageTitle }}</div>
                </el-form-item>
                <el-form-item label="阅读量:" :label-width="formLabelWidth">
                    <div>{{ watchForm.number }}</div>
                </el-form-item>
                <el-form-item label="发布时间:" :label-width="formLabelWidth">
                    <div>{{ watchForm.releaseTime }}</div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="WatchDdialogFormVisible = false">关 闭</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            input: '',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },

            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            value2: '',
            tableData: [
                {
                    id: 1,
                    name: '待签约',
                    address: '上海市普陀区金沙江路 1518 弄',
                    serialnumber: 'BJ1001',
                    mastername: '张三',
                    clientname: '李四',
                    signacontracttime: '2022-7-9',
                    overtime: '2025-7-9',
                },
                {
                    id: 2,
                    name: '履约中',
                    address: '上海市普陀区金沙江路 1517 弄',
                    serialnumber: 'BJ1001',
                    mastername: '张三',
                    clientname: '李四',
                    signacontracttime: '2022-7-9',
                    overtime: '2025-7-9',
                },
                {
                    id: 3,
                    name: '已结束',
                    address: '上海市普陀区金沙江路 1519 弄',
                    serialnumber: 'BJ1001',
                    mastername: '张三',
                    clientname: '李四',
                    signacontracttime: '2022-7-9',
                    overtime: '2025-7-9',
                },
                {
                    id: 4,
                    name: '已逾期',
                    address: '上海市普陀区金沙江路 1516 弄',
                    serialnumber: 'BJ1001',
                    mastername: '张三',
                    clientname: '李四',
                    signacontracttime: '2022-7-9',
                    overtime: '2025-7-9',
                }],
            dialogTableVisible: false,
            dialogFormVisible: false,
            WatchDdialogFormVisible: false,
            watchForm: {
            },
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px'

        };

    },
    methods: {
        dialogFormVisible1(row) {
            this.WatchDdialogFormVisible = true,
                // console.log(row.id)
                this.$axios({
                    method: "GET",
                    url: "/messageList/list",
                    data: { id: row.id },
                }).then((res) => {
                    this.watchForm = res.data[0]
                    this.watchForm.releaseTime = new Date(this.watchForm.releaseTime).toLocaleDateString()
                    console.log(res);
                })
        },
    }
}
</script>

<style lang="less" scoped>
.block {
    margin-top: 10px;
}

.kiki {
    width: 100%;
}
</style>